<template>
  <div class="search">
    <div class="search-a">
      <el-form :inline="true" ref="searchformref" :model="searchdate" class="demo-form-inline">
        <!-- prop	model 的键名。 它可以是一个属性的值(如 a.b.0 或 [a', 'b', '0'])。 在定义了 validate、resetFields 的方法时，该属性是必填的 -->
        <el-form-item label="" prop="id">
          <el-input v-model="searchdate.id" placeholder="请输入合同编号" />
        </el-form-item>

        <el-form-item label="" prop="name">
          <el-input v-model="searchdate.name" placeholder="请输入合同名称" />
        </el-form-item>

        <el-form-item label="" prop="address">
          <el-input v-model="searchdate.address" placeholder="请输入客户名称" />
        </el-form-item>

        <el-form-item label="" prop="write">
          <el-input v-model="searchdate.write" placeholder="请输入签订人" />
        </el-form-item>

        <el-form-item label="" prop="ctstate">
          <el-select v-model="searchdate.ctstate" placeholder="请选择合同状态">
            <el-option label="已通过" value="已通过" />
            <el-option label="待审批" value="待审批" />
            <el-option label="已驳回" value="已驳回" />
            <el-option label="已失效" value="已失效" />
          </el-select>
        </el-form-item>

        <el-form-item label="" prop="date">
          <el-date-picker id="data" v-model="searchdate.date" type="date" value-format="YYYY-MM-DD"
            placeholder="请选择合同日期" />
        </el-form-item>
        <br>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="search-b">
      <el-row class="mb-4">

        <el-button type="primary" @click="setDialogVisible(true)">新增</el-button>
        <el-button type="primary">导出</el-button>
        <el-button type="primary">导入</el-button>


      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { FormInstance } from 'element-plus'

  interface IProps {
    setDialogVisible: (visible: boolean) => void
  }
  const props = defineProps <IProps>()

  const searchformref = ref < FormInstance > ()

  const searchdate = reactive({
    id: '',
    name: '',
    address: '',
    write: '',
    ctstate: '',
    date: ''
  })

  const onSubmit = () => {
    console.log('搜索一下!', { ...searchdate })
  }

  const onReset = () => {
    if (!searchformref.value) return
    //这里获取了from表单 调用重置方法
    searchformref.value.resetFields()
  }
</script>

<style lang="scss" scoped>
  .demo-form-inline .el-input {
    --el-input-width: 140px;
  }

  .demo-form-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex-wrap: wrap; */
  }

  /* 按钮容器 */
  .el-form-item__content {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    align-items: center;
    flex: 1;
    line-height: 32px;
    position: relative;
    font-size: var(--font-size);
    min-width: 0;
  }

  .demo-form-inline[data-v-333ac31d] {
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-wrap: wrap; */
  }

  .search {
    height: 120px;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .search-a {

    height: 60px;
    line-height: 60px;

    /* background-color: pink; */
  }

  .search-b {
    height: 60px;
    display: flex;
    align-items: center;
  }

  .el-form-item {
    margin-bottom: 0;
    margin-right: 16px;

  }

  .el-button {
    margin-left: 12px;
  }
</style>